<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hhtMusic</title>
    <link rel="stylesheet" href="./src/hht.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="hht" class="box">
      <header>
        <div class="logo" @click="backHome">
          <a href="javascript:;">
            <i class="fa fa-spinner" aria-hidden="true"></i>
            <span>music</span>
          </a>
        </div>
        <a href="javascript:;"><img :class="{music:isPlaying,musicStop:isPausing}" v-show="playLogo" @click="backDetail" src="./src/img/music.png" alt="" /></a>
        <div class="form_group">
          <input v-model="keywords" @keyup.enter="searchMusic" type="text" placeholder="请输入歌手或歌曲名" />
          <img @click="searchMusic" src="./src/img/search.png" alt="" />
        </div>
      </header>
      <main>
        <div class="sections" :class="{move_800:m800,move_1600:m1600}">
          <section class="home">
            <div class="recommends">
              <h4>热门推荐</h4>
              <ul>
                <li @click="searchHotMusic('我')">我</li>
                <li @click="searchHotMusic('无人之岛')">无人之岛</li>
                <li @click="searchHotMusic('bad guy')">bad guy</li>
              </ul>
            </div>
            <div class="history">
              <h4 title="最多保留30个">搜索记录(显示最近10条)</h4>
              <span v-if="noHistory" class="noHistory">暂时没有</span>
              <ul v-cloak>
                <li v-for="item in history.slice(-10)" @click="searchHotMusic(item)">{{ item }}</li>
              </ul>
            </div>
            <div class="collection">
              <div class="heart">
                <h4>我的收藏(显示最近20条)</h4>
              </div>
              <span v-if="noLike" class="noLike">暂时没有</span>
              <ul v-cloak>
                <li v-for="(item,index) in like.name.slice(-20)" @click="likeSong(item,index)">{{ item }}</li>
              </ul>
            </div>
          </section>
          <section class="results">
            <ul>
              <li v-for="item in musicList">
                <img @click="playMusic(item.id)" src="./src/img/play.png" alt="" />
                <span>{{ item.name }}&nbsp;&nbsp;</span>--
                <span v-for="arts in item.artists">&nbsp;&nbsp;{{ arts.name }}&nbsp;</span>
                <img v-if="item.mvid" @click="playMV(item.mvid)" src="./src/img/video.png" alt="" class="mv" />
              </li>
            </ul>
            <div v-show="mv" class="video">
              <img src="./src/img/close.png" @click="closeMV" alt="" />
              <video :src="mvUrl" controls="controls"></video>
            </div>
          </section>
          <section class="details">
            <main>
              <div class="animation">
                <div class="records" :class="{player_rotate:isPlaying,player_pausing:isPausing}">
                  <img class="cover" :src="picUrl" alt="" />
                  <img src="./src/img/player.png" alt="" />
                </div>
                <img class="player_bar" :class="{player_bar_rotate:isPlaying,player_bar_pausing:isPausing}" src="./src/img/player_bar.png" alt="" />
                <div class="info">
                  <div class="arts">
                    <b>{{song.name }}&nbsp;&nbsp;&nbsp;</b>
                    <span v-for="item in song.ar">&nbsp;{{ item.name }}</span>
                  </div>
                  <i @click="addLike(song.name,song.id)" :class="{red_heart:heart}" class="fa fa-heart" aria-hidden="true" title="点击收藏"></i>
                </div>
              </div>
              <div class="line"></div>
              <div class="comments">
                <h4>热门评论</h4>
                <span v-if="comments" class="no_comments">暂时没有</span>
                <ul>
                  <li v-for="item in hotComments">
                    <img :src="item.user.avatarUrl" alt="" />
                    <b>&nbsp;{{ item.user.nickname }}</b><br />
                    <span>{{ item.content }}</span>
                  </li>
                </ul>
              </div>
            </main>
            <audio href="audio" :src="musicUrl" @play="play" @pause="pause" controls autoplay loop></audio>
          </section>
        </div>
      </main>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./src/hht.js"></script>
  </body>
</html>
